<template>
  <el-dialog
    v-model="centerDialogVisible"
    width="30%"
    align-center
    color="white"
    style="background-color: #053a6d6e; border: 5px solid #a1bf39"
  >
    <h1 style="color: white">联系方式</h1>
    <el-input
      v-model="oldphone"
      disabled
      style="margin-bottom: 5px; color: white"
    />
    <el-form method="post">
      <el-form-item>
        <el-input
          v-model="newphone"
          placeholder="请填写你的新联系方式"
          style="margin-bottom: 15px; color: white"
          onfocus="this.placeholder=''"
          onblur="this.placeholder='请填写你的新联系方式'"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          round
          @click="changephone()"
          @keyup.enter="changephone()"
          class="tijiao"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
    <script>
export default {
  name: "ChangePhone",

  data() {
    return {
      centerDialogVisible: false,
      oldphone: "",
      userId: "",
      newphone: "",
    };
  },
  created: function () {
    this.userName = sessionStorage.getItem("userName");
    console.log(this.userName);
    this.userId = sessionStorage.getItem("userId");
    console.log(this.userId);
  },

  methods: {
    finduserphone() {
      this.userId = sessionStorage.getItem("userId");
      var data = new FormData();
      data.append("userid", this.userId);
      this.$axios.post("/finduserphone", data).then((resp) => {
        this.oldphone = "旧联系方式：" + resp.data;
        console.log(resp.data);
      });
    },
    changephone() {
      this.userId = sessionStorage.getItem("userId");

      var data = new FormData();
      data.append("newphone", parseInt(this.newphone));
      data.append("userid", this.userId);
      this.$axios.post("/changephone", data).then((resp) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.centerDialogVisible = false;
        this.finduserphone();

        this.newphone = "";
      });
    },
  },

  mounted: function () {
    this.finduserphone();
  },
};
</script>
    <style scoped>
</style>